<template>
  <div ref="monitor">
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card :body-style="{ padding: '10px', height: '870px' }">
          <div class="text-center">摄像头列表</div>
          <el-input
            v-model="input"
            class="w-50 my-3"
            placeholder="请输入摄像头"
            :suffix-icon="Search"
            @input="fuzzySearch"
          />
          <div style="height: 770px; overflow: hidden; overflow-y: auto">
            <div
              v-for="item in data"
              :key="item.id"
              @click="SelectPlay(item)"
              @mousedown="handleMouseDown(item)"
            >
              <div class="cameraDetails">
                <el-image
                  style="width: 60px; height: 60px"
                  :src="item.url"
                  fit="fill"
                  draggable="false"
                />
                <div class="mx-2 h-full" style="max-width: 265px">
                  <div>
                    <div class="text-sm">摄像头ID：{{ item.id }}</div>
                    <div class="text-sm">摄像头名称：{{ item.dz }}</div>
                  </div>
                </div>
                <div class="state">
                  <span class="text-sm">在线</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" @mouseup.stop="startPlayer">
        <div
          ref="videoImg"
          style="position: absolute; z-index: 10"
          v-show="imgFlag"
        >
          <el-image
            style="width: 100px; height: 100px"
            :src="videoData.url"
            fit="fill"
            draggable="false"
          />
        </div>
        <el-card :body-style="{ padding: '5px', height: '870px' }">
          <div class="h-[800px]">
            <one-screen v-if="flag === 'one'" ref="videoPlayer" />
            <nine-screen v-if="flag === 'nine'" ref="videoPlayer" />
            <four-screen v-if="flag === 'four'" ref="videoPlayer" />
          </div>
          <el-row>
            <el-col :span="21" />
            <el-col :span="3">
              <el-image
                style="
                  width: 38px;
                  height: 38px;
                  margin-top: 10px;
                  margin-left: 38px;
                  cursor: pointer;
                "
                src="/img/icon_1p.svg"
                fit="fill"
                @click="screenSize('one')"
              />
              <el-image
                style="width: 38px; height: 38px; cursor: pointer"
                src="/img/icon_4p.svg"
                fit="fill"
                @click="screenSize('four')"
              />
              <el-image
                style="width: 38px; height: 38px; cursor: pointer"
                src="/img/icon.svg"
                fit="fill"
                @click="screenSize('nine')"
              />
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Welcome"
});
import { ref, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import oneScreen from "./components/oneScreen.vue";
import fourScreen from "./components/fourScreen.vue";
import nineScreen from "./components/nineScreen.vue";
import { videoPlayerComponent, videoDataType } from "./utils/videoType";
const input = ref<string>("");
const flag = ref<string>("one");
const imgFlag = ref<boolean>(false);
const offsetFlag = ref<boolean>(false);
const monitor = ref<HTMLElement | null>(null);
const videoImg = ref<HTMLElement | null>(null);
const videoPlayer = ref<(HTMLElement & videoPlayerComponent) | null>(null);
const videoData = ref<videoDataType>({
  url: "/img/xFC9FFD43CBBD.jpg",
  id: "XFC9FFD43CBBD1",
  dz: "港湾创业大厦13楼电梯门口门门",
  ip: "ws://127.0.0.1:10007/rtsp",
  vidUrl: "rtsp://192.168.2.88/live/xFC9FFD43CBA8"
});
const movingdistance = ref<number>(0);
const screenSize = (size: string): void => {
  flag.value = size;
};
const res = [
  {
    url: "/img/xFC9FFD43CBBD.jpg",
    id: "XFC9FFD43CBBD1",
    dz: "港湾创业大厦13楼电梯门口门门",
    ip: "ws://127.0.0.1:10007/rtsp",
    vidUrl: "rtsp://192.168.2.88/live/xFC9FFD43CBA8"
  },
  {
    url: "/img/xz.jpg",
    id: "XFCASFWQE65482",
    dz: "港湾创业大厦14楼窗外",
    ip: "ws://127.0.0.1:10007/rtsp",
    vidUrl: "rtsp://192.168.2.88/live/xFC9FFD43CBA8"
  },
  {
    url: "/img/xFC9FFD43CBBD.jpg",
    id: "XFC9FFD4QWTSDFH",
    dz: "港湾创业大厦15楼门口",
    ip: "ws://127.0.0.1:10007/rtsp",
    vidUrl: "rtsp://192.168.2.88/live/xFC9FFD43CBA8"
  },
  {
    url: "/img/xz.jpg",
    id: "XFC9FFD43ASDASF",
    dz: "港湾创业大厦14楼会议室",
    ip: "ws://127.0.0.1:10007/rtsp",
    vidUrl: "rtsp://192.168.2.88/live/xFC9FFD43CBA8"
  }
];

const fuzzySearch = () => {
  const term = input.value;
  const regex = new RegExp(term, "i");
  data.value = res.filter(item => {
    return (
      (typeof item.id === "string" && regex.test(item.id)) ||
      (typeof item.dz === "string" && regex.test(item.dz))
    );
  });
};

// 鼠标抬起时逻辑处理
const handleUp = () => {
  if (offsetFlag.value) {
    offsetFlag.value = false;
    imgFlag.value = false;
  }
};
// 鼠标抬起时逻辑处理
const handleMove = (e: MouseEvent) => {
  if (offsetFlag.value) {
    movingdistance.value += 1;
    if (movingdistance.value < 3) {
      return;
    }
    imgFlag.value = true;
    const x = e.clientX;
    const y = e.clientY;
    const rect = monitor.value.getBoundingClientRect();
    const offsetX = x - rect.left;
    const offsetY = y - rect.top;
    videoImg.value.style.left = offsetX - 45 + "px";
    videoImg.value.style.top = offsetY - 45 + "px";
    movingdistance.value = 0;
  }
};
// 鼠标按下时逻辑处理，开启拖拽监听
const handleMouseDown = (item: any) => {
  offsetFlag.value = true;
  videoData.value = item;
};

const data = ref<videoDataType[]>();

onMounted(() => {
  data.value = res;
  const body = document.querySelector("body");
  body.addEventListener("mousemove", handleMove);
  window.addEventListener("mouseup", handleUp);
});

const SelectPlay = (item: any) => {
  videoPlayer.value.videoplay(item);
};

// 鼠标松开时在播放器页面处理逻辑
const startPlayer = (e: MouseEvent) => {
  if (offsetFlag.value) {
    const videoIndex = videoPlayer.value.gridRects.findIndex((item: any) => {
      return (
        e.clientX >= item.left &&
        e.clientX <= item.right &&
        e.clientY >= item.top &&
        e.clientY <= item.bottom
      );
    });
    if (videoIndex >= 0) {
      videoPlayer.value.startPlayback(videoIndex, videoData.value);
    }
    offsetFlag.value = false;
    imgFlag.value = false;
  }
};
</script>
<style scoped>
.cameraDetails {
  position: relative;
  display: flex;
  align-items: center;
  width: 98.5%;
  height: 70px;
  padding: 4px;
  margin-bottom: -1px;
  cursor: pointer;
  user-select: none;
  border: 1px solid rgb(192 196 204 / 90%);
  border-radius: 6px;
  -webkit-user-drag: none;
}

.state {
  position: absolute;
  right: 5px;
  width: 40px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: rgb(1 185 209);
  border-radius: 5px;
}

::-webkit-scrollbar {
  display: block;
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #c6cad1;
  border-radius: 5px;
  box-shadow: none !important;
}
</style>
